<template>
  <el-row>
    <smart-table
      :title="postCategoryTitle"
      :formList="postCategoryFormList"
      :selectUrl="postCategorySelectUrl"
      :insertUrl="postCategoryInsertUrl"
      :updateUrl="postCategoryUpdateUrl"
      :deleteUrl="postCategoryDeleteUrl"
      :exportExcelUrl="postCategoryExportUrl"
      :importExcelUrl="postCategoryImportUrl"
      :tableColumns="postCategoryTableColumns"
      :formButtonCtl="postCategoryFormButtonCtl"
      :formRules="postCategoryFormRules"
      :selectMethodExtend="resetTree"
      :maxOptionButtonCount="4"
      :tableLeftWidth="20">
      <template slot="table-other">
        <el-tree
          :data="postCategoryTree"
          ref="postCategoryTreeObj"
          :props="{
            children: 'children',
            label: 'name',
          }"
          highlight-current
          empty-text="无分类"
          node-key="id"
          default-expand-all
          @node-drag-end="insertTreeNode"
          :filter-node-method="filterNode"
          draggable />
      </template>
    </smart-table>
  </el-row>
</template>

<script>
export default {
  data() {
    return {
      //绑定弹窗
      bindDialogVisible: false,
      //当前岗位分类
      currentPostCategory: {},
      //分类树
      postCategoryTree: [],
      //树过滤
      treeFilterText: '',
      //主题
      postCategoryTitle: '岗位分类',
      //表单列表
      postCategoryFormList: [
        {
          title: '分类名',
          name: 'name',
          type: 'input',
          width: 80,
        },
      ],
      //岗位分类查询路径
      postCategorySelectUrl: 'postCategory/lookPostCategory',
      //岗位分类新增路径
      postCategoryInsertUrl: 'postCategory/insertOnePostCategory',
      //岗位分类更新路径
      postCategoryUpdateUrl: 'postCategory/updateOnePostCategory',
      //岗位分类删除路径
      postCategoryDeleteUrl: 'postCategory/deletePostCategory',
      //导出路径
      postCategoryExportUrl: '/recruitService/postCategory/export',
      //导入路径
      postCategoryImportUrl: '/recruitService/postCategory/import',
      //表格列
      postCategoryTableColumns: [
        {
          title: '分类名',
          name: 'name',
        },
        {
          title: '创建时间',
          name: 'createTime',
          width: 180,
        },
        {
          title: '修改时间',
          name: 'updateTime',
          width: 180,
        },
      ],
      //表单按钮控制
      postCategoryFormButtonCtl: {
        detailButton: false,
      },
      //表单校验
      postCategoryFormRules: {
        name: [
          {
            required: true,
            message: '岗位分类名不得为空!',
            trigger: 'blur',
          },
        ],
      },
    }
  },
  methods: {
    getPostCategoryTree(data) {
      this.$store.dispatch('postCategory/lookPostCategoryTree').then((response) => {
        this.postCategoryTree = response.data
      })
      if (data) {
        this.$refs.postCategoryTreeObj.filter(data.name)
      }
    },
    // 树节点拖拽
    insertTreeNode(node, parent, event) {
      var newChildNode = node.data
      var parentNode = parent.data
      if (newChildNode.id == parentNode.id) {
        return
      }
      if (!newChildNode || !parentNode) {
        return
      }
      newChildNode.parentId = parentNode.id
      this.$store.dispatch('postCategory/updateOnePostCategory', newChildNode).then((response) => {
        this.getPostCategoryTree()
      })
    },
    //回显树状图
    resetTree(data) {
      this.getPostCategoryTree(data)
      return data
    },
    // 过滤树
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
  },
}
</script>

<style lang="scss" scoped>
.tree-title {
  text-align: center;
}
::v-deep .title {
  text-align: center;
  font-size: large;
  color: red;
}
.el-transfer {
  margin: auto;
}
</style>
